<template>
	<view class="page">
		<gui-a-header title="爱心助残"></gui-a-header>
		<view class="main">
			<view class="title gui-flex gui-justify-content-center gui-bold c333 f28">
				请选择您的身份
			</view>
			<view class="gui-flex gui-justify-content-center">
				<view class="type_item" :class="[(formData.type == 1) ? 'bg_blue' : 'bg_gray']" @click="typeChange(1)">
					个人
					<image class="pos_image" src="../../static/image/gr_help_w.png" mode="widthFix"
						v-if="formData.type == 1"></image>
					<image class="pos_image" src="../../static/image/gr_help.png" mode="widthFix" v-else></image>
				</view>
				<view class="type_item ml20" :class="[(formData.type == 2) ? 'bg_blue' : 'bg_gray']"
					@click="typeChange(2)">
					公司
					<image class="pos_image" src="../../static/image/qiye_help_w.png" mode="widthFix"
						v-if="formData.type == 2"></image>
					<image class="pos_image" src="../../static/image/qiye_help.png" mode="widthFix" v-else></image>
				</view>
			</view>
			<view class="zw_20 mt40"></view>
			<view class="bgfff textarea_warp">
				<view class="row_input gui-flex gui-space-between f24" v-if="formData.type == 2">
					<view class="label">
						公司
					</view>
					<view class="val">
						<input type="text" class="input_val" v-model="formData.companyName" placeholder="请输入公司名称" />
					</view>
				</view>
				<view class="row_input gui-flex gui-space-between f24">
					<view class="label">
						联系人
					</view>
					<view class="val">
						<input type="text" class="input_val" v-model="formData.contacts" placeholder="请输入联系人名称" />
					</view>
				</view>
				<view class="row_input gui-flex gui-space-between f24">
					<view class="label">
						联系方式
					</view>
					<view class="val">
						<input type="text" class="input_val" v-model="formData.phone" placeholder="请输入联系方式" />
					</view>
				</view>
				<view class="row_input gui-flex gui-space-between f24">
					<view class="label">
						助残时间
					</view>
					<view class="val">
						<!-- <input type="text" class="input_val" v-model="formData.helpDisabledTime"
							placeholder="请输入助残时间" /> -->
						<gui-datetime @confirm="confirmTime" :value="formData.helpDisabledTime" :isTime="false">
							<text v-if="formData.helpDisabledTime">{{formData.helpDisabledTime}}</text>
							<text class="c999" v-else>请选择</text>
						</gui-datetime>
					</view>
				</view>
				<view class="row_input f24">
					<view class="label">
						助残内容
					</view>
					<textarea v-model="formData.helpContext" name="name5" placeholder="请输入助残内容..."
						class="gui-textarea gui-dark-bg-level-1 areapd" :maxlength="400" style="width:100%;"></textarea>
					<text class="max_len c666">{{formData.helpContext.length}}/400</text>
				</view>
			</view>
			<view class="upload">
				<button class="saveBtn" @tap="toSuccess">
					<text class="f32">提交</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import graceChecker from "@/Grace6/js/checker.js"
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	const $u = reactive(inject('$u'))
	import {
		inertHelpDisabled
	} from '@/api/user.js';
	const formData = ref({
		type: 1,
		companyName: '',
		contacts: '',
		phone: '',
		helpDisabledTime: '',
		helpContext: ''
	})

	const isClick = ref(true);

	// 时间确认
	const confirmTime = (res) => {
		formData.value.helpDisabledTime = res[0] + '-' + res[1] + '-' + res[2];
		console.log(formData.value.helpDisabledTime);
	}

	const toSuccess = () => {
		if (formData.value.type == 2 && !formData.value.companyName) {
			$u.msg("请输入公司名称");
			return;
		}
		//定义表单规则
		let rule = [{
			name: 'contacts',
			checkType: 'notnull',
			errorMsg: '请输入联系人名称'
		}, {
			name: 'phone',
			checkType: 'notnull',
			errorMsg: '请输入联系方式'
		}, {
			name: 'phone',
			checkType: 'phoneno',
			errorMsg: '联系方式格式有误'
		}, {
			name: 'helpDisabledTime',
			checkType: 'notnull',
			errorMsg: '请选择助残时间'
		}, {
			name: 'helpContext',
			checkType: 'notnull',
			errorMsg: '请输入助残内容'
		}];
		let checkRes = graceChecker.check(formData.value, rule);
		if (checkRes) {
			if (isClick.value) {
				isClick.value = false;
			} else {
				return;
			}
			let form = Object.assign(formData.value, {})
			inertHelpDisabled(form).then(res => {
				if (res.code == 200) {
					$u.msg("操作成功")
					setTimeout(() => {
						$u.back();
					}, 1000)
				}
			}).finally(() => {
				isClick.value = true;
			})
		} else {
			$u.msg(graceChecker.error);
		}

	}

	const typeChange = (type) => {
		formData.value.type = type;
	}
</script>

<style lang="scss">
	page,
	.page {
		background-color: #fff;
	}

	.title {
		padding: 50rpx 0 35rpx 0;
	}

	.type_item {
		position: relative;
		width: 318rpx;
		height: 152rpx;
		border-radius: 14rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.pos_image {
			position: absolute;
			bottom: 10rpx;
			right: 10rpx;
			width: 60rpx;
			height: auto;
		}

		&.bg_blue {
			color: #fff;
			background: linear-gradient(136deg, #0034C7 0%, #4072FE 100%);
		}

		&.bg_gray {
			color: #666666;
			background: #CCCCCC;
		}
	}

	.ml20 {
		margin-left: 20rpx;
	}

	.zw_20 {
		width: 100%;
		height: 10rpx;
		background: #F6F6F6;
	}

	.textarea_warp {
		position: relative;
		box-sizing: border-box;
		padding: 25rpx 48rpx;

		.max_len {
			position: absolute;
			bottom: 50rpx;
			right: 80rpx;
		}
	}

	.upload {
		box-sizing: border-box;
		padding: 0rpx 48rpx 10rpx 48rpx;
	}

	.areapd {
		padding-top: 30rpx;
		min-height: 300rpx;
		box-sizing: border-box;
		font-size: 24rpx !important;
	}

	.saveBtn {
		margin-top: 75rpx;
	}

	.row_input {
		background-color: rgba(204, 204, 204, 0.3);
		border-radius: 10rpx;
		padding: 23rpx 30rpx;
		margin-bottom: 10rpx;
		align-items: center;
	}

	.input_val {
		text-align: right;
	}
</style>